<template>
  <view class="padding-lr-20 margin-top-24">
    <view class="pay-card padding-tb-30 padding-lr-40 flex-column justify-between">
      <view class="flex-row align-center justify-between width-full">
        <view class="flex-row align-center">
          <image :src="balance.coin_img" class="purse-icon block" />
          <text class="text-24 color-white">{{ balance.coin_name }}余额：</text>
        </view>
        <text class="text-24 color-white">1元 = 100{{ balance.coin_name }}</text>
      </view>

      <view class="flex-row align-end justify-between">
        <text class="text-56 color-white text-bold balance">{{ balance.money }}</text>
        <view v-if="albumId" class="margin-bottom-10 flex-row align-center">
          <text class="text-24 color-white margin-right-4">本集需要:</text>
          <image src="/static/mine/purse-icon.png" class="purse-icon block" />
          <text class="text-28 text-bold color-white">{{ coin }}</text>
        </view>
      </view>
    </view>

    <view class="padding-top-16">
      <view v-if="!albumId" class="margin-top-16">
        <text class="text-32 text-bold color-black">请选择充值金额</text>
      </view>
      <view class="flex-row flex-wrap">
        <view v-for="(item, index) in specification.coin" :key="index" class="top-up-item margin-top-16 relative margin-right-16" @click="getPayInfo(item)">
          <view class="top padding-top-30 padding-bottom-10 flex-column flex-center">
            <view class="flex-row align-center">
              <template v-if="item.coin">
                <image :src="item.img" class="purse-icon block" />
                <text class="text-40 color-primary text-bold">{{ item.coin }}</text>
              </template>
              <text v-else class="text-32 color-primary text-bold">{{item.name}}</text>
            </view>
            <view v-if="item.zengsong" class="margin-top-6 flex-column flex-center">
              <text class="text-22 color-t2">多送{{ item.zengsong }}{{ specification.coin_name }}</text>
              <text class="text-22 color-t2">价值{{ item.zengsongmoney }}元</text>
            </view>
            <text v-else-if="item.time" class="text-22 color-t2 margin-top-20">{{ item.time }}</text>
          </view>
          <view class="bottom flex-row flex-center">
            <text class="text-28 color-t1 text-bold margin-right-10">￥</text>
            <text class="text-36 color-t1 text-bold">{{ item.price }}</text>
          </view>
          <view v-if="item.subscript" class="tag flex-row flex-center">
            <text class="text-24 color-white">{{ item.subscript }}</text>
          </view>
        </view>
        <template v-if="albumId">
          <view v-for="(item, index) in specification.ka" :key="index" class="top-up-item margin-top-16 relative margin-right-16" @click="getPayInfo(item)">
            <view class="top padding-top-30 padding-bottom-10 flex-column flex-center">
              <view class="text-center">
                <text class="text-32 color-primary text-bold">{{item.name}}</text>
              </view>
              <view class="margin-top-10 flex-column flex-center">
                <text class="text-22 color-t2">{{ item.title }}</text>
              </view>
            </view>
            <view class="bottom flex-row flex-center">
              <text class="text-28 color-t1 text-bold margin-right-10">￥</text>
              <text class="text-36 color-t1 text-bold">{{ item.price }}</text>
            </view>
            <view class="tag flex-row flex-center">
              <text class="text-24 color-white">{{ item.title1 }}</text>
            </view>
          </view>
        </template>
      </view>
    </view>

    <view v-if="!albumId" class="padding-top-16">
      <view class="margin-top-8">
        <text class="text-32 text-bold color-black">年卡开通</text>
      </view>
      <view v-for="(item, index) in specification.ka" :key="index" class="margin-top-16 annual-card">
        <view class="padding-top-30 padding-lr-40 padding-bottom-10 justify-between align-end">
          <view>
            <text class="text-30 color-pink text-bold title">{{ item.name }}</text>
            <view class="flex-row align-center">
              <text class="text-32 color-t1 text-bold">￥</text>
              <text class="text-48 color-t1 text-bold price">{{ item.price }}</text>
            </view>
          </view>

          <by-button :font-color="colors.colorWhite" :background="colors.colorPink" width="164rpx" height="62rpx" text="立即开通" @click="getPayInfo(item)" />
        </view>

        <view class="bottom padding-left-40 flex-row align-center">
          <text class="text-28 color-pink">{{ item.title1 }}{{ item.title }}</text>
        </view>
      </view>
    </view>

    <view class="margin-top-30 notice color-t2 text-22">
      <uv-parse :content="specification.xuzhi" @linktap="handleClick" />
    </view>

    <service />
  </view>

</template>

<script setup lang="ts">
import colors from '@/style/style.module.scss'
import { getBalance, getGoods } from '@/common/api'
import { loading, toast, pay, jump } from '@/common/util'
import type { TStrOrNum, AnyObject } from '@/common/types'
import UvParse from '@/uni_modules/uv-parse/components/uv-parse/uv-parse.vue'

interface IProps{
  albumId?: TStrOrNum
  coin?: number
}
const props = defineProps<IProps>()

const $emit = defineEmits(['load', 'paySuccess'])

/**
 * 获取充值规格 start
 * */
const specification = shallowRef<AnyObject>({})
async function handleGetGoods() {
  const res = await getGoods(props.albumId)
  specification.value = res.data
  $emit('load', res.data.xuzhi)
}
handleGetGoods()
watch(
  () => props.albumId,
  handleGetGoods
)
/**
 * 获取充值规格 end
 * */

/**
* 获取余额 start
* */
const balance = shallowRef<AnyObject>({})
async function handleGetBalance() {
  const res = await getBalance()
  balance.value = res.data
  // triggerRef(specification)
}
handleGetBalance()
defineExpose({
  handleGetBalance
})
/**
 * 获取余额 end
 * */

/**
 * 获取支付参数 start
 * */
async function getPayInfo(item: AnyObject) {
  if (props.albumId) item.album_id = props.albumId

  const load = loading()
  try {
    const result = await pay(item)
    if (result) {
      $emit('paySuccess', item)
      if (item.type === 1) await handleGetBalance()
    }
  } catch (err) {
    setTimeout(() => {
      if (err === 4) toast('已取消支付')
      else if (err === 404) toast('暂不支持支付，请升级抖音客户端')
      else toast('支付失败')
    }, 200)
  }
  load.hide()
}
/**
 * 获取支付参数 end
 * */

function handleClick(e: AnyObject) {
  jump('/pages/agreement/agreement?type=' + e.href)
}
</script>

<style scoped lang="scss">
@include setMargin(right, 4);

@include setMargin(top, 6);

@include setMargin(top, 8);

.pay-card{
  height: 174rpx;
  background: $color-pink;
  border-radius: 32rpx;

  .purse-icon{
    width: 40rpx;
    height: 40rpx;
    margin-right: 4rpx;
  }

  .balance{
    line-height: 78rpx;
  }

}

.top-up-item{
  width: 226rpx;
  background: $color-white;
  border-radius: 32rpx;
  border: 2rpx solid #FFE2EA;

  &:nth-child(3n){
    margin-right: 0;
  }

  .top{
    height: 176rpx;
  }

  .purse-icon{
    width: 68rpx;
    height: 68rpx;
  }

  .bottom{
    height: 80rpx;
    background: #FEF6FD;
    border-radius: 0 0 32rpx 32rpx;
  }

  .tag{
    width: 139rpx;
    height: 42rpx;
    background: linear-gradient( 80deg, #FF306E 0%, #FFC044 100%);
    @include position(absolute, -10rpx, $left: -2rpx);
    border-radius: 32rpx 0 32rpx 0;
  }

}

.annual-card{
  background: linear-gradient( 324deg, #FFF2EE 0%, #FEF6FD 100%);
  border-radius: 32rpx 87rpx 32rpx 32rpx;
  border: 1rpx solid #FFE2EA;
  overflow: hidden;

  .title{
    line-height: 42rpx;
  }

  .price{
    line-height: 68rpx;
  }

  .bottom{
    height: 66rpx;
    background: linear-gradient( 90deg, #FFD8E3 0%, rgba(254,243,244,0) 100%, rgba(254,243,244,0) 100%);
  }

}
</style>
